<template>
  <div id="home">
    <bread></bread>
    <!-- 卡片 -->
    <el-card>
      <div class="box-card">
        <!-- 输入框与搜索框 添加用户 -->
        <el-input placeholder="请输入内容"
                  v-model="query"
                  class="input-with-select">

          <el-button slot="append"
                     icon="el-icon-search"
                     @click.native='users'></el-button>
        </el-input>
        <el-button type="primary"
                   @click="dialogFormVisible = true">添加用户</el-button>
      </div>
      <!-- 对话框 -->
      <el-dialog title="添加用户"
                 @close='close'
                 :visible.sync="dialogFormVisible">
        <el-form :model="form"
                 ref="refAdd"
                 :rules="ruless">
          <el-form-item label="用户名"
                        prop='username'
                        label-width="80px">
            <el-input v-model="form.username"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码"
                        prop='password'
                        label-width="80px">
            <el-input v-model="form.password"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱"
                        prop='email'
                        label-width="80px">
            <el-input v-model="form.email"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话"
                        prop='mobile'
                        label-width="80px">
            <el-input v-model="form.mobile"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 表格 -->
      <el-table :data="
                   tableData"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="#"
                         width="48">
        </el-table-column>
        <el-table-column prop="username"
                         label="姓名"
                         width="200">
        </el-table-column>
        <el-table-column prop="email"
                         label="邮箱">
        </el-table-column>
        <el-table-column prop="mobile"
                         label="电话"
                         width="200">
        </el-table-column>
        <el-table-column label="角色"
                         prop='role_name'
                         width="200">

        </el-table-column>
        <el-table-column label="状态"
                         width="200">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state"
                       @change="changeValue(scope.row.mg_state,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 修改用户 -->
            <!-- 修改用户的弹出框 -->
            <el-dialog title="修改用户"
                       @close='closes'
                       :visible.sync="FormVisible">
              <el-form :model="eitdForm"
                       ref="refEitd"
                       :rules="eitdRules">
                <el-form-item label="用户名"
                              label-width="80px">
                  <el-input v-model="eitdForm.username"
                            :disabled="true"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱"
                              prop='email'
                              label-width="80px">
                  <el-input v-model="eitdForm.email"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机"
                              prop='mobile'
                              label-width="80px">
                  <el-input v-model="eitdForm.mobile"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="xiaoForm(scope.row)">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 修改用户的弹出框 -->
            <el-button type="primary"
                       icon="el-icon-edit"
                       @click="xiaoSubmitForm(scope.row)"
                       size="mini"></el-button>
            <!-- 修改用户 -->
            <!-- 删除用户 -->
            <el-button type="danger"
                       icon="el-icon-delete"
                       @click="remove(scope.row.id)"
                       size="mini"></el-button>
            <!-- 分配权限 -->
            <el-tooltip class="item"
                        effect="dark"
                        content="分配权限"
                        placement="top">
              <el-button type="warning"
                         icon="el-icon-setting"
                         size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pagenum"
                       :page-sizes="[1, 2, 5, 10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="Total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { usersApi, usersAddApi, usersremoveApi, usersChangeApi, usersStetaApi } from '../api'
export default {
  props: {},
  data () {
    var validatePass = (rule, value, callback) => {
      const reg = /^[a-z0-9]+$/i
      if (!reg.test(value)) {
        callback(new Error('请输入合法密码'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!reg.test(value)) {
        callback(new Error('请输入合法手机'))
      } else {
        callback()
      }
    }
    return {
      query: '',
      Total: 0,
      tableData: [],
      pagenum: 1, // 当前页码
      pagesize: 2, // 每页显示条数
      FormVisible: false,
      dialogFormVisible: false,
      form: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      ruless: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { message: '请输入正确的用户名', trigger: 'blur' }
        ],
        password: [
          { max: 14, min: 3, message: '长度在 3 到 14 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur', required: true }
        ],
        email: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 14, min: 3, message: '长度在 3 到 14 个字符', trigger: 'blur' }
        ],
        mobile: [

          { required: true, message: '请输入用户名', trigger: 'blur' },
          { message: '请输入正确的用户名', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ]
      },
      // 修改用户名 校验
      eitdRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { max: 14, min: 3, message: '长度在 3 到 14 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ]
      },
      // 修改用户名数据使用
      eitdForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    }
  },
  methods: {
    // 修改用户状态
    async changeValue (state, id) {
      await usersStetaApi(state, id)
    },
    // 修改分页 每页条
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`, 123)
      this.pagesize = val
      this.users()
    },
    // 修改分页 当前页
    handleCurrentChange (val) {
      this.pagenum = val
      this.users()
      // console.log(`当前页: ${val}`, 456)
    },
    // 封装的表格数据
    async users () {
      const res = await usersApi(this.pagenum, this.pagesize, this.query)
      this.Total = res.data.data.total
      this.tableData = res.data.data.users
      this.pagenum = res.data.data.pagenum
    },
    // 添加用户弹出框关闭的回调
    close () {
      this.form = {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
      this.$refs.refAdd.resetFields()
    },
    // 修改用户弹出框关闭的回调
    closes () {
      this.eitdForm = {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
      this.$refs.refEitd.resetFields()
    },
    // 表单对话框的二次校验
    submitForm () {
      this.$refs.refAdd.validate((valid) => {
        if (valid) {
          // 满足就进入 发送添加用户请求
          usersAddApi(this.form)
          // 关闭弹出框
          this.dialogFormVisible = false
          // 刷新表格数据
          this.users()
        } else {
          // 不满足进入
          return false
        }
      })
    },
    // 删除用户
    async remove (id) {
      await usersremoveApi(id)
      this.users()
    },
    // 修改用户
    xiaoSubmitForm (obj) {
      this.FormVisible = true
      this.eitdForm = obj
    },
    // 修改用户的二次规则校验
    xiaoForm () {
      this.$refs.refEitd.validate(async (valid) => {
        if (valid) {
          this.FormVisible = false
          // 发送修改用户请求
          await usersChangeApi(this.eitdForm)
          // 重新渲染页面
          this.users()
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.users()
  }

}
</script>

<style scoped lang='less'>
* {
  font-size: 12px;
}
#home {
  overflow-x: hidden;
  overflow-y: hidden;
}
.block {
  margin-top: 15px;
}
.box-card {
  box-sizing: border-box;
  display: flex;
  .el-input {
    width: 399px;
    margin-bottom: 20px;
    margin-right: 15px;
    font-size: 14px;
    .el-input__inner {
      margin-left: 30px;
      margin-right: 45px;
      width: 35%;
    }
    .el-button {
      width: 10%;
    }
  }
  .el-button {
    width: 98px;
    height: 40px;
    font-size: 14px;
  }
}
</style>
